<template>
<!-- transition只能有一个儿子 子节点 -->
    <transition name="fade">
        <div v-if="isShow" class="box"></div>
    </transition>
    <!-- 取反isShow=!isShow -->
    <button @click="isShow=!isShow">点击</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Test',
  setup () {
    const isShow = ref(true)
    return { isShow }
  }
}
</script>

<style scoped lang="less">
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
.fade-leave-enter{
    opacity: 1;
}
.fade-leave-active{
    transition: all 1s;
}
.fade-leave-to{
    opacity: 0;
}
</style>
